<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            font-size: 100px;
        }
    </style>
</head>
<div id="app"></div>

<body>
    <!-- runtime-dom 「是浏览器」-- >  runtime-core 「跨平台」 -- > reactive 「响应式」
    <!-- runtime-dom 他的作用就是提供 dom api （提供一系列操作api的方法） -->
    <script type="module">
        // createRenderer 创建渲染器
        // render 渲染 {内置的渲染器，进行渲染，渲染到dom上}
        // h 创建虚拟dom {type, props, children} (用对象来描述dom结构)
        import {
            createRenderer,
            // render,
            h
        } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
        import {
            // renderOptions,
            render
        } from "./runtime-dom.js"

        import { effect, ref } from "/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js";

        // 测试二次渲染
        // const vnode = h('div', {
        //     style: {
        //         color: 'red'
        //     },
        // }, 'Click me')

        // const vnode2 = h('div', {
        //     style: {
        //         color: 'blue'
        //     },
        // }, 'Click me')

        // render(vnode, app)
        // setTimeout(() => {
        //     render(vnode2, app)
        // }, 2000)


        //  测试多个元素
        // const vnode = h('h1', [h('p', 'hello'), h('p', 'world')])
        // render(vnode, app)


        // //   <button disabled>Button</button> 会渲染成  disabled: ''
        // const vnode = h('button', {
        //     // disabled: ''
        //     // 这个代码的意图是“不禁用”按钮，但如果渲染器仍然使用 setAttribute 函数设置属性值：
        //     // 浏览器运行上述代码后，按钮仍然会被禁用。这是因为使用 setAttribute 函数设置的值总会被转化为字符串， el.setAttribute('disabled', 'false')
        //     // 因此，渲染器不应总是使用 setAttribute 函数将 vnode.props 对象中的属性设置到元素上。 一种更自然的思路是，我们可以优先设置 DOM 属性，例如： el.disabled = false
        //     disabled: false
        // }, 'Click me')
        // render(vnode, app)




        // // 绑定数组的情况
        // const vnode = h('button', {
        //     class: 'btn',
        //     onClick: [
        //         // 第一个处理函数
        //         () => {
        //             alert('clicked 1')
        //         },
        //         // 第二个处理函数
        //         () => {
        //             alert('clicked 2')
        //         }
        //     ]

        // }, 'Submit');
        // render(vnode, app)
        // console.log(vnode)



        // 测试冒泡 暂时未发现问题
        const bol = ref(false)
        effect(() => {
            console.log('bol.value', bol.value)
            const vnode = h('div', bol.value ? {
                onClick: () => {
                    alert('父元素 clicked')
                }
            } : {}, [h('p', {
                onClick: () => {
                    alert('子元素 clicked')
                    bol.value = true
                },

            }, 'text')]);
            render(vnode, app)
        })



    </script>
</body>

</html>